<template>
	<view class="pb130">
		<view class="p23 f-y-c">
			<view @click="tjgg" class="ggi f-c jggz cf7c f26" :style="{color:fColor,borderColor:fColor}">+添加加料</view>
			<view class="c9 f24 ml20">注意：最多只能添加10个加料</view>
		</view>
		<view class="f26">
			<view v-for="(v,i) in spec" :key='i' class="f-raw bf mb30">
				<view class="p3 hlr w70 f-row">
					<view class="f-c-c f-1">
						<view>加料名称</view>
						<input v-model="v.materialName" class="mt10 t-c" placeholder="请输入"></input>
					</view>
					<view @click="xggg(i)" class="f-y-c"><text class="iconfont iconbj f40"
							:style="{color:fColor}"></text></view>
				</view>
				<view @click="scgg(i)" class="p30 f-c" style="width: 30%;" :style="{color:fColor}">
					<view>删除</view>
				</view>
				<view class="p30 f-c-c hlr w50">
					<view>价格<text class="cf7c f22">(元)</text></view>
					<input type="digit" v-model="v.salesPrice" class="mt10 t-c" placeholder="请输入"></input>
				</view>
				<!-- <view class="p30 f-c-c w33">
					<view>库存<text class="cf7c f22">(件)</text></view>
					<input type="number" v-model="v.salesStock" class="mt10 t-c" placeholder="请输入"></input>
				</view> -->
				<view @click="changeType(v)" class="p3 f-c-c">
					<view>次日置满</view>
					<text class="iconfont mt20" :class="v.fillType==1?'icondx':'icondxk'"
						:style="{color:v.fillType==1?fColor:''}"></text>
				</view>
			</view>
		</view>
		<view class="foot-btnc">
			<button @click="qdgg" :loading="loading" :disabled="loading" class="foot-btn2" :style='{background:fColor}'
				hover-class="btnhc">确定</button>
		</view>
		<mg-tcxz :show.sync="show" :dval='radiov' :arr='ggarr' :color='fColor' @confirm='rconfirm'></mg-tcxz>
		<!-- <mg-tcxz :show.sync="showdx" type='2' :dval='checkv' :arr='ggzarr' :color='fColor' @confirm='cconfirm'> -->
		</mg-tcxz>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mgTcxz from '@/components/form/mg-tcxz.vue'
	export default {
		name: 'fbsp-gg',
		components: {
			mgTcxz
		},
		data() {
			return {
				show: false,
				radiov: '',
				ggarr: [],
				showdx: false,
				checkv: [],
				ggzarr: [],
				spec: [],
				parentGroup: [],
				tbwsj: '',
				tbwyj: '',
				tbwkc: '',
				tbtsj: '',
				tbtyj: '',
				tbtkc: '',
				wsj: '',
				wyj: '',
				wkc: '',
				tsj: '',
				tyj: '',
				tkc: '',
				loading: false,
			}
		},
		async onLoad(options) {
			// console.log(options)
			// this.getSystem()
			this.util.setNT('设置加料')
			//加料数据源
			this.ggarr = getApp().globalData.spflsj.materData.map(v => ({
				name: v.name,
				value: v.id, //加料id
				price: v.price
			}))
			//编辑带过来的参数
			this.spec = JSON.parse(options.arr) || []
			// console.log(this.ggarr, this.spec)
		},
		computed: {},
		methods: {
			changeType(e){
				e.fillType=(e.fillType==1?2:1)
			},
			tjgg() {
				this.hqggtype = 1
				if (this.spec.length > 9) return this.util.message('最多添加10个加料', 3)
				this.$set(this.spec, this.spec.length, {
					materialName: '加料' + (this.spec.length + 1),
					salesPrice: '',
					salesStock: '',
					fillType: 2
				})
				// console.log(this.group)
			},
			xggg(i) {
				this.xgggIdx = i
				this.hqggtype = 2
				this.show = true
			},
			rconfirm(e) {
				// console.log(this.hqggtype, this.xgggIdx, e, this.spec, this.ggarr[e.i])
				if (!e) return
				if (this.hqggtype == 1) {} else {
					this.$set(this.spec[this.xgggIdx], 'materialName', this.ggarr[e.i].name)
					this.$set(this.spec[this.xgggIdx], 'salesPrice', this.ggarr[e.i].price)
				}
				// console.log(e, gIdx, this.spec)
			},
			scgg(i) {
				this.$delete(this.spec, i)
			},
			qdgg() {
				// if (!this.spec.length) return this.util.message('请添加加料', 3)
				for (let i in this.spec) {
					if (!this.spec[i].materialName.trim()) {
						return this.util.message('加料名称不能为空', 3)
					}
					// if (!this.spec[i].son.length) {
					// 	return this.util.message('请删除未添加属性的加料', 3)
					// }
					// for (let j in this.spec[i].son) {
					// 	if (!this.spec[i].son[j].name.trim()) {
					// 		return this.util.message('加料的属性名称不能为空', 3)
					// 	}
					// }
				}
				for (let i in this.spec) {
					if (!Number(this.spec[i].salesPrice)) {
						return this.util.message('加料的价格不能为空', 3)
					}
				}
				this.loading = true
				let lastPage = this.util.getPage()
				lastPage.$vm.params.feeding = this.spec
				this.go({
					t: 4
				})
				// console.log(this.spec)
			},
			cconfirm(e) {
				let arr = this.ggzarr.filter(v => e.v.includes(v.value))
				this.$set(this.spec[this.specIdx], 'son', arr)
				// console.log(e, arr, this.specIdx, this.spec)
			},
		},
	}
</script>
<style scoped lang="scss">
	.ggi {
		height: 60rpx;
		border-radius: 56rpx;
		padding: 0 20rpx 0 30rpx;
	}

	.jggz {
		border: 1px dotted #F77C00;
		padding: 0 30rpx;
	}

	.jlhd {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			transform: scaleY(0.5);
			width: 8rpx;
			background: #F77C00;
		}
	}
</style>
